<template>
  <div>
    <div class="box1">
      <img :src="info.pic" alt="" />
      <div>￥{{ info.minPrice }}</div>
      <div>
        价格<s>￥{{ info.originalPrice }}</s>
      </div>
      <div>
        {{ info.name }}
      </div>
      <p>{{ info.characteristic }}</p>
    </div>

    <!-- 购买菜单 -->
    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" @click="addCart" />
    </van-goods-action>

    <br /><br />
    <!-- 详细页下半部分渲染 -->
    <div v-html="content" class="box2"></div>
  </div>
</template>

<script>
// 引入封装好的接口
import { getDetail } from "../api/api";
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  data() {
    return {
      info: {},
      content: "",
    };
  },
  computed: {
    ...mapState([""]),
  },
  methods: {
    ...mapMutations(["saveData"]),
    async get_list() {
      let { data } = await getDetail(this.$route.query.id);
      // console.log(data);
      this.info = data.basicInfo;
      this.content = data.content;

      console.log(this.info);
    },
    addCart() {
      // this.$store.commit("");
      this.saveData({
        name: this.info.name,
        price: this.info.minPrice,
        img: this.info.pic,
        id: this.info.id,
        num: 1,
        check: true,
      });
      this.$router.push("/cart");
    },
  },
  created() {
    // console.log(this.$route.query);
    this.get_list();
  },
};
</script>

<style scoped>
.box2 /deep/ img {
  width: 100vw;
  height: 400px;
  margin-bottom: 50px;
}
.box1 img {
  width: 100vw;
  height: 400px;
}
</style>